import React, { Component } from 'react'
import { Tabs, WhiteSpace} from 'antd-mobile';
import axios from "axios";
// const tabs = [
//   { title: "First Tab",},
//   { title: "Second Tab"},
//   { title: "Third Tab"},
//   { title: "four Tab"},
// ];

class TabExample extends Component {
    state = {
        tabs: []
      }
      componentDidMount() {
        axios.get("reader-service/tesoon-news-type").then((res)=>{
          this.setState({
            tabs:res.data.map((item)=>({
                  title:item.name,
                  key:item.id,
                  content:this.getContent(item.id)
              }))
          })
        })
      }
      async getContent(id){
          let a="";
            await axios.get("reader-service/tesoon-news?news-type="+id).then((res)=>{
               a = res.data.content
            })
            console.log(a);
        return a
      }
  render(){
      return <div style={{ height: '100vh' }}>
     <Tabs tabs={this.state.tabs}
      initialPage={0}
      onTabClick={(tabs) => {

      }}
      renderTabBar={props => <Tabs.DefaultTabBar {...props}/>}>
          {this.renderContent}
    </Tabs>
    <WhiteSpace />
    </div>
  }
  renderContent = tabs =>(
    <div style={{backgroundColor: '#fff' }}>

    </div>

  );
}

export default TabExample
